<template>
	<div>
		
		<div class="container">
			<form class="form-horizontal">
				<div class="form-group form-inline">
					<div class="col-xs-8">
						<input type="text" class="form-control" v-model="message" placeholder="请输入QQ或CN" required="required">
					</div>
					<input type="submit" class="btn btn-success col-xs-3" @click.prevent="searchSubmit()">
				</div>
			</form>
		</div>
		
		<div>
			<ul v-show="userInfo.length > 0">
				<li v-for="item in userInfo">
					<info :item="item" :isActive="infoState" :isContral="infoContral"></info>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import info from '../../../components/userInfo.vue'
	export default{
		data() {
			return {
				message:'',
				userInfo:[],
				infoState: true,
				infoContral: true
			}
		},
		methods:{
			searchSubmit(){
				const xhr = new XMLHttpRequest()
				xhr.onload = () => {
					if(JSON.parse(xhr.responseText).message){
						alert(JSON.parse(xhr.responseText).message)
						return
					}
					this.userInfo = JSON.parse(xhr.responseText)
				}
				xhr.open('post','/search')
				xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
				xhr.send("message="+this.message)
			},
			fatherGetInfo(){
				this.userInfo = []
				this.$parent.getInfo()
			}
		},
		filters:{
			showSex(val){
				if(val == 0){
					return '男'
				}else{
					return '女'
				}
			},
		},
		components:{
			info
		}
	}
</script>

<style scoped="scoped">
	ul{
		list-style: none;
	}
</style>
